<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-01-14 19:33:31
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-03 17:41:18
 * @FilePath: \recruitAPP\recruitApp\recruitApp\src\pages\user\Me.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 视图层 -->
<template>
  <div class="body">
    <van-nav-bar
      title="我的"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="before" v-show="num4 == 0" @click="write">
      <span>请填写个人信息</span>
    </div>
    <div
      class="name"
      v-show="num4 == 1"
      v-for="(item, idex) in me"
      :key="index"
    >
      <div class="message">
        <span>{{ item.name }} <van-icon name="edit" @click="revise" /></span>
        <img :src="item.url" />
      </div>
      <div class="number">
        <div v-for="(item, idex) in number" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.number }}</span>
        </div>
      </div>
    </div>
    <div class="function">
      <div v-for="(item, index) in fc" :key="index" @click="run(item.path)">
        <span>{{ item.name }}</span>
        <div>
          <van-badge
            :content="item.num"
            position="center-right"
            v-show="item.num >= 1"
          />
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <van-button type="primary" block @click="exit">退出登录</van-button>
  </div>
</template>
<!-- 逻辑层 -->
<script setup>
// 本地图片引入
import img from "../../../assets/images/u616.png";
import { get, post, put, del, patch } from "~/axios/http";
import { ref } from "vue";
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
// 跳转个人信息修改
const revise = () => {
  router.push("/information");
};
// 跳转详情页
const run = (val) => {
  router.push(val);
};
const me = ref([
  {
    name: "",
    url: img,
  },
]);
const num1 = ref();
const num2 = ref();
const num3 = ref([]);
const num4 = ref();
async function num() {
  let res1 = await get("/api/infomation2?state=投递成功");
  let res2 = await get("/api/infomation2?state=已约面试");
  let res3 = await get("/api/infomation2?like=1");
  let id = ref(localStorage.getItem("key"));
  let res4 = await get(`/api/infomation/${id.value}`);
  console.log(res4.data.iphone);
  if (res4.data.name == "") {
    num4.value = 0;
  } else {
    num4.value = 1;
  }
  me.value[0].name = res4.data.name;
  me.value[0].url = res4.data.img;
  console.log(num4);
  num1.value = res1.data.length;
  num2.value = res2.data.length;
  num3.value = res3.data.length;
}
num();
const number = ref([
  { name: "已投递", number: num1 },
  { name: "已面试", number: num2 },
  { name: "感兴趣", number: num3 },
]);
const fc = ref([
  { name: "在线简历", num: "0", path: "/resume" },
  { name: "修改密码", num: "0", path: "/verify" },
  { name: "意见反馈", num: "2", path: "/opinion" },
  { name: "消息", num: "10" },
]);
const write = () => {
  router.push("/information");
};

async function exit() {
  let res5 = await get("/api/infomation2");
  res5.data.forEach(async function (element) {
    if (element.state == "投递成功") {
      let res6 = await patch(`/api/infomation2/${element.id}`, {
        state: "",
      });
    } else if (element.state == "已约面试") {
      let res7 = await patch(`/api/infomation2/${element.id}`, {
        state: "",
      });
    } else if (element.like == "1") {
      let res8 = await patch(`/api/infomation2/${element.id}`, {
        like: "0",
      });
    }
    router.push("/login");
  });
}
</script>
<!-- 样式层 -->
<style  scoped>
.body {
  background-color: #f2f2f2;
  height: 100vh;
}
.name {
  background-color: #f59a23;
  width: 100%;
}
.before {
  width: 100%;
  height: 26.6667vw;
  background-color: cornflowerblue;
  text-align: center;
  font-size: 4.3333vw;
  line-height: 26.6667vw;
  color: #775a34;
}
.message {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 2.6667vw;
}
.message img {
  height: 18.6667vw;
}
.message span {
  line-height: 21.3333vw;
  color: #fce6c8;
  font-size: 4.2667vw;
}
.number {
  display: flex;
  width: 90%;
  margin: 5.3333vw auto;
  justify-content: space-around;
}
.number div {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fce6c8;
  margin-bottom: 5.3333vw;
}
.number div span:nth-child(1) {
  margin-bottom: 2.6667vw;
}
.function {
  width: 100%;
}
.function > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 13.3333vw;
  background-color: #fff;
  margin-bottom: 2.6667vw;
  align-items: center;
}
.function > div span {
  margin-left: 2.6667vw;
}
.function > div div {
  margin-right: 2.6667vw;
}
img {
  border-radius: 50%;
  width: 18.3333vw;
}
</style>